<!doctype html>
<!--suppress ALL-->
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Lucky Api</title>
	<!-- food icons -->
	<link rel="stylesheet" type="text/css" href="/webmanagement/css/organicfoodicons.css" />
	<!-- demo styles -->
	<link rel="stylesheet" type="text/css" href="/webmanagement/css/default.css">
	<!-- menu styles -->
	<link rel="stylesheet" type="text/css" href="/webmanagement/css/component.css" />
	<script src="js/modernizr-custom.js"></script>
</head>
<body>

<script>
	//iframe高度自适应
	function reinitIframe(){
		var iframe = document.getElementById("lucky-iframe");
		try{
			var bHeight = iframe.contentWindow.document.body.scrollHeight;
			var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
			var height = Math.max(bHeight, dHeight);
			iframe.height = height;
			console.log(height);
		}catch (ex){

		}
	}
	window.setInterval("reinitIframe()", 200);
</script>

	<!-- Main container -->
	<div class="container">
		<!-- Blueprint header -->
		<header class="bp-header cf">
			<div class="dummy-logo">
				<div class="dummy-icon foodicon foodicon--coconut">

				</div>
				<h2 class="dummy-heading">Lucky Api</h2>
			</div>
			<div class="bp-header__main">
				<h1 class="bp-header__title">多级导航菜单</h1>
				<nav class="bp-nav">
					<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
					<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/css3/ui-design/201511202803.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
				</nav>
			</div>
		</header>
		<button class="action action--open" aria-label="Open Menu"><span class="icon icon--menu"></span></button>
		<nav id="ml-menu" class="menu">
			<button class="action action--close" aria-label="Close Menu"><span class="icon icon--cross"></span></button>
			<div class="menu__wrap">
				<!--一级菜单-->
				<ul data-menu="main" class="menu__level">
					<li class="menu__item"  th:each="mappingDto:${jars}">
						<a th:attr="data-submenu=${mappingDto.expandName}" th:text="${mappingDto.expandName}" class="menu__link" href="#"></a>
					</li>
				</ul>

				<!--二级菜单-->
				<div th:each="mappingDto:${jars}">
					<ul th:attr="data-menu=${mappingDto.expandName}" class="menu__level">
						<li class="menu__item" th:each="urlMap:${mappingDto.urls}">
							<a th:attr="data-submenu=${urlMap.key}" th:text="${urlMap.key}" class="menu__link" href="#"></a>
						</li>
					</ul>
				</div>


				<!--三级菜单-->
				<div th:each="mappingDto:${jars}">
					<div th:each="urlMap:${mappingDto.urls}">
						<ul th:attr="data-menu=${urlMap.key}" class="menu__level">
							<li class="menu__item" th:each="url:${urlMap.value}">
								<a th:text="${url.url}" th:attr="title=${url.description.description}" class="menu__link" href="#"></a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</nav>
		<div class="content">
			<iframe name="iframe-main" width="100%" frameborder="0" id="lucky-iframe">

			</iframe>

			<!-- Ajax loaded content here -->
		</div>
	</div>
	
	<!-- /view -->
	<script src="/webmanagement/js/classie.js"></script>
	<script src="/webmanagement/js/dummydata.js"></script>
	<script src="/webmanagement/js/main.js"></script>
	<script>
	(function() {
		var menuEl = document.getElementById('ml-menu'),
			mlmenu = new MLMenu(menuEl, {
				// breadcrumbsCtrl : true, // show breadcrumbs
				// initialBreadcrumb : 'all', // initial breadcrumb text
				backCtrl : false, // show back button
				// itemsDelayInterval : 60, // delay between each menu item sliding animation
				onItemClick: loadDummyData // callback: item that doesn´t have a submenu gets clicked - onItemClick([event], [inner HTML of the clicked item])
			});

		// mobile menu toggle
		var openMenuCtrl = document.querySelector('.action--open'),
			closeMenuCtrl = document.querySelector('.action--close');

		openMenuCtrl.addEventListener('click', openMenu);
		closeMenuCtrl.addEventListener('click', closeMenu);

		function openMenu() {
			classie.add(menuEl, 'menu--open');
		}

		function closeMenu() {
			classie.remove(menuEl, 'menu--open');
		}

		// simulate grid content loading
		var gridWrapper = document.querySelector('.content');

		function loadDummyData(ev, itemName) {
			ev.preventDefault();

			closeMenu();
			gridWrapper.innerHTML = '';
			classie.add(gridWrapper, 'content--loading');
			setTimeout(function() {
				classie.remove(gridWrapper, 'content--loading');
				gridWrapper.innerHTML = '<ul class="products">' + dummyData[itemName] + '<ul>';
			}, 700);
		}
	})();
	</script>
</body>
</html>